<template>
  <div class="paySetRedact-mokuai">
    <div class="accounts-index">
      <div class="accounts-name">
        <div class="accounts-name-font">
          添加成员
          <div class="float-right">
            <el-button icon="el-icon-arrow-left" @click.native="returnButton" size="small">返回</el-button>
          </div>
        </div>
      </div>
      <div class="paySetRedact-content">
        <!-- 添加成员 -->
        <div class="paySetRedact-setting">
          <el-form
            :model="ruleForm"
            status-icon
            :rules="rules"
            ref="ruleForm"
            label-width="220px"
            class="demo-ruleForm"
          >
            <el-form-item label="成员名称:" prop="username">
              <el-input v-model="ruleForm.username"></el-input>
            </el-form-item>
            <el-form-item label="成员姓名:" prop="nickName">
              <el-input v-model="ruleForm.nickName"></el-input>
            </el-form-item>
            <el-form-item label="邮箱地址：" prop="email">
              <el-input v-model="ruleForm.email"></el-input>
            </el-form-item>
            <el-form-item prop="roleId" label="所属角色:">
              <el-select v-model="ruleForm.roleId" placeholder="所属部门">
                <!-- 不要忘记 payTypeOptions 绑定到data中 -->
                <el-option
                  v-for="option in roleOptions"
                  :key="option.id"
                  :label="option.name"
                  :value="option.id"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="登录密码:" prop="password">
              <el-input type="password" v-model.number="ruleForm.password"></el-input>
            </el-form-item>
            <el-form-item label="确认密码:" prop="checkPass">
              <el-input type="password" v-model.number="ruleForm.checkPass"></el-input>
            </el-form-item>

            <el-form-item label="备注信息:">
              <el-input type="textarea" :rows="8" placeholder="请输入内容" v-model="ruleForm.radioOne"></el-input>
            </el-form-item>
            <el-form-item class="button-center">
              <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>



<script>
import userApi from "@/api/settings/user";
import roleApi from "@/api/settings/role";
export default {
  data() {
    var checkUername = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("邮箱"));
      }
      setTimeout(() => {
    
          

            var reg=/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
            if(!reg.test(value)){

               callback(new Error("请输入有效的邮箱"));
            }else{

              callback();
            }

       
      }, 1000);
    };

    // var validatePass = (rule, value, callback) => {
    //   if (value === "") {
    //     callback(new Error("密码请修改js"));
    //   } else {
    //     if (this.ruleForm.checkPass !== "") {
    //       this.$refs.ruleForm.validateField("checkPass");
    //     }
    //     callback();
    //   }
    // };
    // var validatePass2 = (rule, value, callback) => {
    //   if (value === "") {
    //     callback(new Error("密码请修改js"));
    //   } else if (value !== this.ruleForm.pass) {
    //     callback(new Error("密码请修改js"));
    //   } else {
    //     callback();
    //   }
    // };
    // 校验确认密码是否一致
    const validatePass = (rule, value, callback) => {
      // value 代表 checkPass
      if (value !== this.ruleForm.password) {
        callback(new Error("两次输入的密码不一致"));
      } else {
        // 相等,则通过
        callback();
      }
    };
    return {
      roleOptions: [],
      user: this.$route.query.user,
      // 表单
      ruleForm: {
        roleId: ""
      },
      rules: {
        email: [
          { required: true, message: "邮箱不能为空", trigger: "blur" },
          { validator: checkUername, trigger: "change" }
        ],
        nickName: [
          { required: true, message: "成员姓名不能为空", trigger: "blur" }
        ],
        username: [
          { required: true, message: "成员名称不能为空", trigger: "blur" }
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" }
        ],
        checkPass: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          { validator: validatePass, trigger: "change" }
        ]
      }
    };
  },
  created() {
    if (this.user != null) {
      this.ruleForm = this.user;
    }
    //查询所属部门
    roleApi.findAll().then(response => {
      const resp = response.data;
      this.roleOptions = resp.data;
    });
  },
  methods: {
    // 返回
    returnButton() {
      this.$router.replace({ path: "/settings/memberManage" });
    },
    //
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.user != null) {
            userApi.updateById(this.ruleForm).then(response => {
              const resp = response.data;
              if (resp.code == 0) {
                //新增成功，刷新列表数据
                this.$router.replace({ path: "/settings/memberManage" });
              } else {
                this.$message({
                  message: resp.msg,
                  type: "warning"
                });
              }
            });
          } else {
            userApi.add(this.ruleForm).then(response => {
              const resp = response.data;
              if (resp.code == 0) {
                //新增成功，刷新列表数据
                this.$router.replace({ path: "/settings/memberManage" });
              } else {
                this.$message({
                  message: resp.msg,
                  type: "warning"
                });
              }
            });
          }
        } else {
          return false;
        }
      });
    }
  }
};
</script>
<style>
/* 自定义 */
.font-size-small {
  font-size: 10px;
}
.member-select-width {
  width: 270px;
}
.select-width {
  width: 100px;
}
.float-right {
  float: right;
}
.paySetRedact-mokuai {
  height: 1000px;
  background-color: rgb(249, 249, 249);
  padding-top: 30px;
}
.accounts-index {
  width: 80%;
  margin: auto;
  background-color: rgb(255, 255, 255);
}
.accounts-name {
  width: 100%;
  height: 40px;
  background-color: rgb(240, 240, 240);
}
.accounts-name-font {
  height: 40px;
  line-height: 40px;
  margin-left: 20px;
  font-size: 14px;
}
.paySetRedact-content {
  width: 100%;
  height: 750px;
}

.paySetRedact-setting {
  margin-top: 20px;
  margin-left: 15%;
  width: 55%;
}

.button-center {
  margin-left: 20%;
}
</style>